<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${webConfig.name}</title>
    <meta name="keywords" content="${webConfig.keyword}">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/index.css?232311232">
    <link rel="stylesheet" href="${s.base}/mobile/js/Mdate/needcss/Mdate.css">
    <style type="text/css">
        .weui-navbar__item.weui-bar__item--on {
            color: #7CC4B9;
            background-color: #fff;
            font-weight: bolder;
            font-size: 20px;
            margin-top: 0px;
        }
        .weui-navbar__item {
            font-size: 20px;
        }
        .weui-tab__bd-item{
            margin-top: 5px;
            width: 94%;
            margin-left: 3%;
        }
        .getDateBg{z-index: 99998;}
        .getDateBox{z-index: 99999;}
        .sidebar-wrapper { position: relative; height: 100%; overflow: auto;}
        #sucaihuo { background-color: #4bb19f;}
        #sucaihuo .nav { margin-top: 20px; padding-left: 20px; line-height: 40px; list-style-type: none;}
        #sucaihuo .nav a { display: block; font: 100 16px/40px '微软雅黑'; color: #f7f7f7; text-decoration: none;}
        #sucaihuo .nav a:hover { background-color: #4bb19f;}
        [data-simplersidebar='active'] { box-shadow: 3px 0px 3px 0px rgba(0, 0, 0, 0.5);}
        .inm2_tab1 img{width: 203px; height: 130px;}
        .inm3_le img{width: 170px; height: 160px;}
        .weui-article{padding: 0px;}
    </style>
</head>
<body style="background-color: #F8F8F8">
<div class="sidebar" id="sucaihuo">
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        <ul class="nav">
            <#list navigationList as navigation>
                <li><a href="${navigation.url}">${navigation.name}</a></li>
            </#list>
        </ul>
    </div>
</div>
<div style="background: #ffffff; position: fixed; left: 0px; top: 0px;border-bottom: 1px solid #f4f4f4;height: 3.5rem; z-index: 999; width: 100%;">
    <div style="width: 15%; float: left;">
        <img id="menu" src="${s.base}/mobile/img/147.png" style="height: 1.5rem;padding: 0.5rem 0px 0.5rem 0.3rem;">
    </div>
    <div style="width: 70%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: auto; text-align: center; float: left;line-height: 3.5rem;font-size: 16px;">
       ${product.title}
    </div>
    <div style="width: 15%; height: auto; text-align: right;  float: left;">
    </div>
    <div style="clear: both;"></div>
</div>
<div style="width: 100%; height: 3.5rem;"></div>
    <div class="banner_detail">
        <img src="${product.productPic}" alt="">
    </div>
    <div class="banner_detail_title">
        <div class="banner_detail_listtt">
            <p class="title_font_d">${product.title}</p>
            <div class="sender">
                <div>现价：<p>￥${product.money}</p></div>
                <div>预付金额：<p>￥${product.payMoney}</p></div>
            </div>
        </div>
    </div>

    <div class="weui-tab weui-tab_detail">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
                产品介绍
            </a>
            <a class="weui-navbar__item" href="#tab2">
                结构介绍
            </a>
            <a class="weui-navbar__item" href="#tab3">
                注意事项
            </a>
        </div>
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <h1>${product.content}</h1>
            </div>
            <div id="tab2" class="weui-tab__bd-item">
                <h1>${product.orgDesc}</h1>
            </div>
            <div id="tab3" class="weui-tab__bd-item">
                <h1>${product.notice}</h1>
            </div>
        </div>
    </div>
<div style="width:100%;height:100px">

</div>
    <div id="checkFoot">
        <a href="tel:${webConfig.linkPhone}"><img src="${s.base}/mobile/img/65.png" alt=""></a>
        <div>
            <p>我要预约</p>
        </div>
    </div>
<div id="inputButtom" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="yueyue">
            <h2>${product.title}</h2>
            <div class="sender" style="flex-direction: column;">
                <div style="margin-bottom: 12px;">现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：<p>￥${product.money}</p>
                </div>
                <div>预付金额：<p>￥${product.payMoney}</p>
                </div>
            </div>
            <div class="sender_21">
                <p>联&nbsp;系&nbsp;&nbsp;人：</p>
                <input type="text" id="linkUser" style="background: none; border-radius: 0px;">
            </div>
            <div class="sender_21">
                <p>手机号码：</p>
                <input type="number" id="phone" style="background: none; border-radius: 0px;">
            </div>
            <div class="sender_21">
                <p>预约时间：</p>
                <input type="text" id="linkDate" style="background: none; border-radius: 0px;">
            </div>
            <button id="submitBtn" type="button">立即预约</button>
        </div>
    </div>
</div>
</body>
</html>
<!-- body 最后 -->
<script src="${s.base}/mobile/js/jquery.min.js"></script>
<script src="${s.base}/mobile/js/jquery-weui.min.js"></script>
<script src="${s.base}/mobile/js/Mdate/iScroll.js"></script>
<script src="${s.base}/mobile/js/Mdate/Mdate.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="${s.base}/mobile/js/swiper.min.js"></script>
<script src="${s.base}/mobile/js/city-picker.min.js"></script>
<script src="${s.base}/mobile/js/base.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/simpler-sidebar.min.js"></script>
<script src="${s.base}/mobile/newjs/window_port.js"></script>

<script type="text/javascript">
    $(function() {
        $('#sucaihuo').simplerSidebar({
            opener: '#menu',
            sidebar: {
                align: 'left',
                width: 200
            }
        });
    });

    new Mdate("linkDate", {
        beginYear: "2019",
        endYear: "2025",
        endMonth: "12",
        format: "-"
    })
    $("#checkFoot").click(function () {
        $("#inputButtom").popup();
    })
    var productId='${product.id}';
    $(".swiper-container").swiper();
    $("#submitBtn").on("click",function(){
        var linkUser = $("#linkUser").val();
        if(linkUser == null || linkUser == "") {
            $.toast("请输入联系人", "text");
            return false;
        }

        var phone = $("#phone").val();
        if(phone == null || phone == "") {
            $.toast("请输入手机号", "text");
            return false;
        }
        var linkDate = $("#linkDate").val();
        if(linkDate == null || linkDate == "") {
            $.toast("请选择预约日期", "text");
            return false;
        }
        var param = {linkUser:linkUser,linkDateStr:linkDate,phone:phone,productId:productId};

        $.showLoading("正在提交中");
        $.post("/web/saveProduct",param,function(result){
            if(1==result.returnInfo.state){
                $.hideLoading();
                $.alert("您提交预约成功，我们将在3个工作日内联系您进行支付订单！", function() {
                    //点击确认后的回调函数
                    window.location.reload();
                });

            }else{
                $.hideLoading();
                $.toast("提交失败", "text");
            }
        },"json");
    });


</script>